<template>
  <q-menu anchor="top end" self="bottom right">
    <q-card class="row emoji-container q-pa-md">
      <q-btn
        padding="none"
        fab
        flat
        class="emoji"
        v-for="emoji in emojis"
        :key="emoji"
        @click="$emit('insert', emoji)"
        v-close-popup
      >{{emoji}}</q-btn>
    </q-card>
  </q-menu>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'emoji-panel',
  emits: ['insert'],
  setup() {
    const emojis = [
      '😊',
      '😂',
      '🤣',
      '❤',
      '😍',
      '😒',
      '👌',
      '😘',
      '💕',
      '😁',
      '👍',
      '🙌',
      '🤦‍♀️',
      '🤦‍♂️',
      '🤷‍♀️',
      '🤷‍♂️',
      '✌',
      '🤞',
      '😉',
      '😎',
      '🎶',
      '😢',
      '💖',
      '😜',
      '👏',
      '💋',
      '🌹',
      '🎉',
      '🎂',
      '🤳',
      '🐱‍👤',
      '🐱‍🏍',
      '🐱‍💻',
      '🐱‍🐉',
      '🐱‍👓',
      '🐱‍🚀',
      '✔',
      '👀',
      '😃',
      '✨',
    ];
    return { emojis };
  },
});
</script>
<style lang="sass" scoped>
.emoji-container
  min-width: 300px
  min-height: 300px
  width: 300px
  height: 300px
  .emoji
    font-size: 24px
</style>